<template>
  <!-- ElegantDemeanourManage 风采管理 -->
  <PageContainer>
    <view class="container">
      <Header :title="`${typeText}风采`" :is-box-shadow="false" />
      <view class="action-bar">
        <template v-if="isEdit">
          <view class="upload-bar">
            <text>提示：{{ typeText }}名片页展示前{{ showNum }}张图片</text>
            <button type="none" class="upload-btn" @click="handleUpload">上传图片</button>
          </view>
        </template>
        <template v-else>
          <view class="switch-btns">
            <template v-for="v in modelList" :key="v.icon">
              <view class="switch-btns__item" @click="setModeSwitch(v.width)">
                <view
                  class="ali-icon"
                  :style="{ color: imgWidth === v.width ? '#D7B87C' : '#808080' }"
                >
                  {{ v.icon }}
                </view>
              </view>
            </template>
          </view>
        </template>
      </view>
      <Pinterest v-model="dataList" :container-height="containerHeight">
        <template #default="{ index }">
          <view v-if="isEdit" class="handle-wrap">
            <view class="del-btn" @click.stop="del(index)">
              <image class="del-btn-icon" src="https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/icon/del-icon.png" mode="scaleToFill" />
            </view>
            <view v-if="index !== 0" class="set-top" @click.stop="setTop(index)">
              <view class="set-top-btn">
                <view class="ali-icon">&#xe609;</view>
                <text>置顶</text>
              </view>
            </view>
          </view>
        </template>
      </Pinterest>
      <TButtonGroup v-if="isEdit">
        <TButton class="gutter-btn" text="取消" custom-class="cardBlackBtn" @click="cancel" />
        <TButton class="gutter-btn" text="确认" custom-class="cardBtn" @click="submit" />
      </TButtonGroup>
    </view>
  </PageContainer>
</template>

<script lang="ts" setup>
  /**  ElegantDemeanourManage  风采管理 */
  import PageContainer from '@/components/PageContainer/index.vue';
  import Header from '@/components/Header/index.vue';
  import { navigateBack, onLoad } from '@/router';
  import { ref, watch } from 'vue';
  import Dictionary from '@/utils/dictionary';
  import { usePinterest } from '@/components/Pinterest';
  import Pinterest from '@/components/Pinterest/index.vue';
  import { useUpload } from '@/hooks/core/useUpload';
  import { type ElegantDemeanourManage } from '@/router/types/modules';
  import { Toast } from '@/utils';
  import TButtonGroup from '@/components/TButtonGroup/index.vue';
  import TButton from '@/components/TButtonGroup/TButton.vue';

  const typeText = ref('');
  const isEdit = ref(false);
  const showNum = ref(5);
  const limit = ref(30);

  let callback: ElegantDemeanourManage['callback'];

  const modelList = ref([
    {
      width: 690,
      icon: '\ue63f',
    },
    {
      width: 330,
      icon: '\ue63e',
    },
  ]);

  /** 图片宽度 */
  const imgWidth = ref(modelList.value[1].width);
  const { dataList, containerHeight, setData, setImgWidth, delItem, setTop } = usePinterest({
    imgInitWidth: imgWidth.value,
  });
  function setModeSwitch(width: number) {
    imgWidth.value = width;
    setImgWidth(width);
  }

  const uploadCount = ref(limit.value);
  const { successResult, chooseFile, delResultItem } = useUpload({
    count: uploadCount,
  });

  watch(
    successResult,
    (val) => {
      if (val.length > 0) {
        const item = val[val.length - 1];
        if (item && item.isSuccess) {
          uploadCount.value--;
          setData([
            {
              src: item.filePath as string,
              localPath: item.tempFilePath,
            },
          ]);
        }
      }
    },
    {
      deep: true,
    },
  );

  function handleUpload() {
    const len = dataList.value.length;
    const max = limit.value;
    const balance = max - len;
    if (len >= max || balance === 0 || balance < 0) {
      return Toast(`${typeText.value}风采最多只能上传${limit.value}张照片`, 'none');
    }
    chooseFile({ mediaType: 'image' });
  }

  function cancel() {
    navigateBack();
  }
  function submit() {
    callback?.(dataList.value.map((v) => v.imagePathBig));
    navigateBack();
  }

  function del(index: number) {
    delItem(index);
    delResultItem(index);
    uploadCount.value++;
  }

  onLoad<'ElegantDemeanourManage'>((op) => {
    const types = Dictionary.getLocal('memberType');
    typeText.value = types.find((v) => v.dictValue === op.applyType)?.dictLabel ?? '';
    isEdit.value = op.isEdit;
    op.showNum && (showNum.value = op.showNum);
    op.limit && (limit.value = op.limit);
    uploadCount.value = limit.value - op.imgList.length;
    setData(op.imgList.map((v) => ({ src: v })));
    callback = op.callback;
  });
</script>

<style lang="scss" scoped>
  .container {
    padding-bottom: env(safe-area-inset-bottom);
    .action-bar {
      background-color: #fff;
      border-bottom: 1px solid #f5f5f5;
      border-top: 1px solid #f5f5f5;
    }
    .switch-btns {
      padding: 0 30rpx;
      height: 96rpx;
      background-color: #fff;
      margin-bottom: 4rpx;
      display: flex;
      align-items: center;
      justify-content: flex-end;

      &__item {
        width: 50rpx;
        height: 50rpx;
        overflow: hidden;
        margin-right: 20rpx;
        text-align: center;
        line-height: 50rpx;

        .ali-icon {
          font-size: 40rpx;
        }
      }
    }
    .upload-bar {
      height: 96rpx;
      padding: 0 30rpx;
      color: #333;
      font-size: 23rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .upload-btn {
        width: 135rpx;
        height: 54rpx;
        background: #e9e3b5;
        border-radius: 10rpx;
        font-size: 23rpx;
        line-height: 54rpx;
      }
    }

    .handle-wrap {
      .del-btn {
        width: 50rpx;
        height: 50rpx;
        position: absolute;
        right: -16rpx;
        top: -16rpx;
        text-align: center;
        line-height: 50rpx;
        &-icon {
          width: 32rpx;
          height: 32rpx;
        }
      }

      .set-top {
        width: 107rpx;
        height: 50rpx;
        position: absolute;
        right: 0;
        bottom: 0;
        &-btn {
          width: 88rpx;
          height: 32rpx;
          background: rgba(0, 0, 0, 0.7);
          border-radius: 10rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #fff;
          font-size: 24rpx;
          .ali-icon {
            font-size: 24rpx;
          }
        }
      }
    }
  }
</style>
